<template>
  <div class="app-container ">
    <div class="bg historybox">
      <div class="alarmStyle">
        <ul>
          <li style="border: 1px solid #FF3535;color:  #FF3535" @click="clickalarmType(1)">一级报警 <a-icon v-if="Alarmparams.select.indexOf(1)>=0" class="liicon" type="check-square"  theme="filled" style="color:#FF3535 "/> </li>
          <li style="border: 1px solid #FF7865;color:  #FF7865" @click="clickalarmType(2)">二级报警 <a-icon v-if="Alarmparams.select.indexOf(2)>=0" class="liicon" type="check-square"  theme="filled" style="color:#FF7865 "/></li>
          <li style="border: 1px solid #FFBB00;color:  #FFBB00" @click="clickalarmType(3)">三级报警 <a-icon v-if="Alarmparams.select.indexOf(3)>=0" class="liicon" type="check-square"  theme="filled" style="color:#FFBB00 "/></li>
          <li style="border: 1px solid #f8d77e;color:  #f8d77e" @click="clickalarmType(4)">系统提示信息 <a-icon v-if="Alarmparams.select.indexOf(4)>=0" class="liicon" type="check-square"  theme="filled" style="color:#f8d77e "/></li>
        </ul>
      </div>
      <div style="height:594px">
        <a-table :columns="columns" :data-source="WebSoloAlarmList" :rowKey="(record,index)=>{return index}" :pagination='false'>
          <span slot="alarmNum" slot-scope="text, record" :style="{'background-color':colorList[record.alarmtype-1],'color':'#fff','padding':'0 4px' }">{{text}}</span>
<!--          <span slot="address5" slot-scope="text, record"  @click="toProcess(record)"><a-icon type="ellipsis"  style="color:#289EF6;font-size:30px;font-weight: bold "/></span>-->
        </a-table>
      </div>
      <div style="padding:20px">
       <a-pagination size="small" :total="total" :show-total="total => `一共 ${total} 条`" @change='changepage' />
      </div>
    </div>
    <a-modal v-model="visible" title="处理报警" ok-text="确认" cancel-text="取消" @ok="hideModal" width="20%">
      <a-select  :getPopupContainer="(triggerNode) => triggerNode.parentNode"   placeholder="请选择处理方式" style="width: 200px">
        <a-select-option :value="item.value" v-for="(item,index) in options1" :key="index">
          {{item.name}}
        </a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>
<script>
//
import api from "@/api/deviceInfo";
const columns = [

  {
    title: "报警号",
    dataIndex: "alarmNum",
    scopedSlots: { customRender: 'alarmNum' },
  },
  {
    title: "报警内容",
    dataIndex: "alarmdata"
  }, {
    title: "报警时间",
    dataIndex: "uploadtime",
  }, {
    title: "消除时间",
    dataIndex: "releasetime"
  }
];

let colorList=['#FF3535','#FF7865','#FFBB00','#f8d77e']
export default {
  props:{
   
  },
  data() {
    return {
      columns,
      form: { num: 1 },
      options1: [{ name: "生产车间1", value: 1 }, { name: "生产车间2", value: 2 }],
      options2: [{ name: "2333", value: 1 }, { name: "3444", value: 2 }],
      colorList:colorList,
      visible:false,
        Alarmparams:{
        page:1,
        pageSize:10,
        macsn:'',
        select:'1,2,3,4'
      },
      WebSoloAlarmList:[],
      total:0
    };
  },
  mounted(){
     this.Alarmparams.macsn=this.$route.query.macsn;
      this.AlarmSelectAndPage()
  },
  methods: {
     clickalarmType(i) {
      let index = this.Alarmparams.select.indexOf(i);
      if (index >= 0) {
        //有就取消
        let str = index == 0 ? i : "," + i;
        this.Alarmparams.select = this.Alarmparams.select.replace(str, "");
      } else {
        this.Alarmparams.select =
          index == 0 ? this.Alarmparams.select : this.Alarmparams.select + "," + i;
      }
      this.AlarmSelectAndPage();
    },
    changepage(i,k){
      this.Alarmparams.page=i
     this.AlarmSelectAndPage()
    },
      //查询机床报警信息并分页
    AlarmSelectAndPage(){
      api.AlarmSelectAndPage(this.Alarmparams).then(res => {
        this.WebSoloAlarmList = res.Data.content;
        this.total = res.Data.total;
      });
    },
    hideModal(){
      this.visible=false
    },
    toProcess(data){
      this.visible=true
    },
    handleChange(){

    },
    onChangeEnd(){

    },
    onChangestart(date, dateString){
    },
    handleSubmit() {

    }
  }
};
</script>
<style scoped lang="less">
@import "../../index.less";
</style>
